<div class="layout-container">
  <div class="nav-tabs">
    <span class="tab" [ngClass]="{'tabActive': tabs === 1}" (click)="tabs = 1">事件通知</span>
    <span class="tab" [ngClass]="{'tabActive': tabs === 2}" (click)="checkedCustom()">自定义通知</span>
  </div>
  <div *ngIf="tabs == 1">
    <div class="form-group clearfix">
      <div class="form-inline pull-left">
        <button type="button" class="btn btn-default" (click)="getAllTempList(1, itemsPerPage, '支付成功'); addTempModal.show();">新增模板</button>
      </div>
    </div>

    <table class="table">
      <thead>
      <tr>
        <th>id</th>
        <th>wx_id</th>
        <th>标题</th>
        <th>关键词</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody *ngIf="!!templateList">
      <tr *ngFor="let item of templateList">
        <td>{{item.id}}</td>
        <td>{{item.wx_id}}</td>
        <td>{{item.title}}</td>
        <td *ngIf="!item.extend">此模板已失效，请删除</td>
        <td *ngIf="!!item.extend"><span class="mr-5" *ngFor="let ite of item.extend.keyword_list">{{ite}}</span></td>
        <td>{{item.created_at}}</td>
        <td>
          <a href="javascript:;" (click)="delMsgTemp(item.template_id)">删除</a>
        </td>
      </tr>
      </tbody>
      <tbody *ngIf="!templateList">
      <tr>
        <td class="text-center" colspan="7">暂无消息模板</td>
      </tr>
      </tbody>
    </table>

  </div>

  <div *ngIf="tabs === 2">
    <div class="form-group clearfix" *ngIf="!steps">
      <div class="form-inline pull-left">
        <button type="button" class="btn btn-default" (click)="steps = 1">新建自定义通知</button>
      </div>
    </div>

    <table class="table" *ngIf="!steps">
      <thead>
      <tr>
        <th>id</th>
        <th>模板ID</th>
        <th>模板名称</th>
        <th>创建时间</th>
        <th>通知类型</th>
        <th>发送人数</th>
        <th>打开人数</th>
      </tr>
      </thead>
      <tbody  *ngIf="!!jobList.length">
      <tr *ngFor="let item of jobList">
        <td>{{item.id}}</td>
        <td>{{item.wx_id}}</td>
        <td>{{item.wx_template_message.title}}</td>
        <td>{{item.created_at}}</td>
        <td>{{item.pageType}}</td>
        <td>{{item.reality_sendee_total||0}}</td>
        <td>{{item.sendee_click_total||0}}</td>
      </tr>
      </tbody>
      <tbody *ngIf="!jobList.length">
      <tr>
        <td class="text-center" colspan="7">暂无消息模板</td>
      </tr>
      </tbody>
    </table>
    <div class="text-center">
      <pagination  *ngIf="!steps" (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage"  [maxSize]="5"
                   previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
    </div>

    <div class="steps" *ngIf="!!steps">
      <span [ngClass]="{'done': steps != 1,'now': steps == 1}">选择模板</span><i class="iconfont icon-right-copy"></i>
      <span [ngClass]="{'done': steps == 3,'now': steps == 2}">输入模板内容</span><i class="iconfont icon-right-copy"></i>
      <span [ngClass]="{'now': steps == 3}">选择用户，确认下发</span>
    </div>

    <div *ngIf="steps == 1">
      <table class="table">
        <thead>
        <tr>
          <th></th>
          <th>微信模板ID</th>
          <th>微信模板wx_id</th>
          <th>模板标题</th>
          <th>关键字</th>
        </tr>
        </thead>
        <tbody *ngIf="!!templateList">
        <tr *ngFor="let item of templateList" (click)="checkedTemp(item)">
          <td><input type="radio" name="temp" [checked]="checked_temp?.extend?.keyword_list == item.extend.keyword_list"></td>
          <td>{{item.id}}</td>
          <td>{{item.wx_id}}</td>
          <td>{{item.title}}</td>
          <td *ngIf="!item.extend">此模板已失效，请删除</td>
          <td *ngIf="!!item.extend"><span class="mr-5" *ngFor="let ite of item.extend.keyword_list">{{ite}}</span></td>
        </tr>
        </tbody>
        <tbody *ngIf="!templateList">
        <tr>
          <td class="text-center" colspan="7">暂无消息模板</td>
        </tr>
        </tbody>
      </table>

      <div class="text-center">
        <button class="btn btn-default" (click)="steps = 0">取 消</button>
        <button class="btn btn-success" [disabled]="!checked_temp?.extend?.keyword_list.length" (click)="nextStep(2)">下一步</button>
      </div>
    </div>

    <div *ngIf="steps == 2">
      <div class="temp">
        <div class="temp-title">
          <img src="../../../../assets/images/logo.png">
          <span>浙江宝信网络科技有限公司</span>
        </div>
        <div class="temp-content-title">
          <div>{{checked_temp.title}}</div>
          <div class="time">11月27日 00:00</div>
        </div>
        <div class="temp-content" *ngFor="let item of checked_temp.extend.keyword_list;let i =index;" [ngClass]="{'magnify': !i&&keyWord_magnify=='1','red': !i&&keyWord_red}">
          <div class="title">{{item}}</div>
          <div class="content">{{msgContent[i]}}</div>
        </div>
        <div class="temp-footer">
          <span>查看详情</span>
          <i class="iconfont icon-right"></i>
        </div>
      </div>

      <div class="form">
        <form #contentForm="ngForm">
          <div class="form-item" *ngFor="let item of checked_temp.extend.keyword_list;let i = index;">
            <div class="title">{{item}}</div>
            <div *ngIf="i == 0&&keyWord_magnify=='1'" class="content">
              <input type="text" class="form-control" name="content[{{i}}]" [(ngModel)]="msgContent[i]" required>
            </div>
            <div *ngIf="i == 0&&keyWord_magnify=='0'" class="content">
              <textarea cols="10" rows="2" style="resize: none" type="text" class="form-control" name="content[{{i}}]" [(ngModel)]="msgContent[i]" required>
              </textarea>
            </div>
            <div *ngIf="i != 0" class="content">
              <textarea cols="10" rows="2" style="resize: none" type="text" class="form-control" name="content[{{i}}]" [(ngModel)]="msgContent[i]" required>
              </textarea>
            </div>
            <span *ngIf="i == 0">
              <input type="checkbox" [checked]="keyWord_magnify=='1'" id="magnify" (click)="checkedKeyWord()"><label for="magnify">关键词放大</label>
              <input type="checkbox" [checked]="keyWord_red" id="red" (click)="checkedRed()"><label for="red">标红</label>
            </span>
            <div class="tips" *ngIf="i == 0&&keyWord_magnify=='1'">关键词放大字段，不能超过7个字</div>
          </div>
        </form>

        <div class="form-item">
          <div class="title">链接类型</div>
          <div class="content">
            <select class="form-control" name="url" [(ngModel)]="url_type" (change)="changeUrl()">
              <option value="pages/index/index">首页</option>
              <option value="pages/product-list/product-list">商品列表</option>
              <option value="pages/product/product">商品详情</option>
              <option value="pages/group-product/group-product">拼团详情</option>
              <option value="pages/group-buy-list/group-buy-list">拼团列表</option>
              <option value="pages/index/index?card_coupons_uuid=">卡券</option>
            </select>
          </div>
        </div>
        <div class="form-item" *ngIf="url_type == 'pages/product/product'">
          <div class="title">商品名称</div>
          <div class="content">
            <img src="{{checkedGoods?(aliyunOssOutputUrl+'/'+checkedGoods?.first_picture):''}}" alt="">
            <span class="omit" title="{{checkedGoods?.name}}">{{checkedGoods?.name}}</span>
          </div>
          <span><a href="javascript:;" (click)="addGoodsModal.show();">更换</a></span>
        </div>
        <div class="form-item" *ngIf="url_type == 'pages/group-product/group-product'">
          <div class="title">拼团活动</div>
          <div class="content">
            <span class="omit" title="{{checkedGroup?.name}}">{{checkedGroup?.name}}</span><br>
            <img src="{{!!checkedGroup?(aliyunOssOutputUrl+'/'+checkedGroup.activity_goods[0].goods.first_picture):''}}" alt="">
            <span class="omit" title="{{checkedGroup?.activity_goods[0]?.goods_name}}">{{checkedGroup?.activity_goods[0]?.goods_name}}</span>
          </div>
          <span><a href="javascript:;" (click)="addGroupModal.show();">更换</a></span>
        </div>
        <div class="form-item" *ngIf="url_type == 'pages/index/index?card_coupons_uuid='">
          <div class="title">卡券</div>
          <div class="content">
            <span class="omit" title="{{checkedCoupon?.card_coupons_name}}">名称:{{checkedCoupon?.card_coupons_name}}</span><br>
            <span class="omit">类型: 满 {{checkedCoupon?.condition_lower_limit/1000}} 减 {{checkedCoupon?.face_value/1000}}</span><br>
            <span class="omit" title="{{checkedCoupon?.card_coupons_name}}">剩余库存:{{checkedCoupon?.remain}}</span>
          </div>
          <span><a href="javascript:;" (click)="addCouponModal.show();">更换</a></span>
        </div>
      </div>

      <div class="text-center mt20">
        <button class="btn btn-success" (click)="steps = 1">上一步</button>
        <button class="btn btn-success" (click)="steps = 3" [disabled]="!contentForm.form.valid||(url_type==1&&!checkedGoods)||(url_type==2&&!checkedGroup)">下一步</button>
      </div>
    </div>

    <div *ngIf="steps == 3">
      <div class="temp">
        <div class="temp-title">
          <img src="../../../../assets/images/logo.png">
          <span>浙江宝信网络科技有限公司</span>
        </div>
        <div class="temp-content-title">
          <div>{{checked_temp.title}}</div>
          <div class="time">11月27日 15:37</div>
        </div>
        <div class="temp-content" *ngFor="let item of checked_temp.extend.keyword_list;let i =index;" [ngClass]="{'magnify': !i&&keyWord_magnify=='1','red': !i&&keyWord_red}">
          <div class="title">{{item}}</div>
          <div class="content">{{msgContent[i]}}</div>
        </div>
        <div class="temp-footer">
          <span>查看详情</span>
          <i class="iconfont icon-right"></i>
        </div>
      </div>

      <div class="form">
        <div class="form-item">
          是否按属性下发
          <div class="ui-radio" [class.ui-radioed]="sendAttr == 1" (click)="sendAttr = 1" disabled>
            <i class="iconfont icon-iconfontradiobox"></i>
            <span>是</span>
            <input type="radio" value="">
          </div>
          <div class="ui-radio" [class.ui-radioed]="sendAttr == 0" (click)="sendAttr = 0" disabled>
            <i class="iconfont icon-iconfontradiobox"></i>
            <span>否</span>
            <input type="radio" value="">
          </div>
        </div>
        <div *ngIf="sendAttr == 1">
          <div class="form-item">
            <div class="title">用户性别</div>
            <div class="content">
              <select class="form-control" name="sex">
                <option value="0">男</option>
                <option value="1">女</option>
              </select>
            </div>
          </div>
          <div class="form-item">
            <div class="title">地理位置</div>
            <div class="content">
              <select class="form-control" name="province">
                <option value="0">省</option>
              </select>
              <select class="form-control" name="city">
                <option value="0">市</option>
              </select>
              <select class="form-control" name="region">
                <option value="0">区</option>
              </select>
            </div>
          </div>
          <div class="form-item">
            <div class="title">用户数量限制</div>
            <div class="content">
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
        <div class="form-item">
          是否延时发送
          <div class="ui-radio" [class.ui-radioed]="delay == 1" (click)="delay = 1" disabled>
            <i class="iconfont icon-iconfontradiobox"></i>
            <span>是</span>
            <input type="radio" value="">
          </div>
          <div class="ui-radio" [class.ui-radioed]="delay == 0" (click)="delay = 0" disabled>
            <i class="iconfont icon-iconfontradiobox"></i>
            <span>否</span>
            <input type="radio" value="">
          </div>
        </div>
        <div class="form-item" *ngIf="delay == 1">
          <div class="col-md-6">
            <date-picker
              class="picker"
              [minDate]="minDate"
              [maxDate]="maxDate"
              [disableDays]="disableDays"
              (selectedDate)='sendDate = $event'></date-picker>
          </div>
          <div class="col-md-5">
            <input type="time" class="form-control" [(ngModel)]="sendTime" name="time">
          </div>
        </div>
      </div>
      <div class="text-center mt20">
        <button class="btn btn-success" (click)="steps = 2;url_type = 'pages/index/index';">上一步</button>
        <button class="btn btn-success" (click)="confirmAddBatchJob()" [disabled]="delay == 1&&!sendTime">确认发送</button>
      </div>

    </div>
  </div>

</div>


<!-- 消息模板列表 -->
<div class="modal fade" bsModal #addTempModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新增消息模板</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addTempModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="list-type">
          <ul class="li-style">
            <li (click)="getAllTempList(1, itemsPerPage, '支付成功')">支付成功 <i *ngIf="keyword === '支付成功'" class="iconfont icon-left"></i></li>
            <li (click)="getAllTempList(1, itemsPerPage, '拼团成功')">拼团成功 <i *ngIf="keyword === '拼团成功'" class="iconfont icon-left"></i></li>
            <li (click)="getAllTempList(1, itemsPerPage, '拼团失败')">拼团失败 <i *ngIf="keyword === '拼团失败'" class="iconfont icon-left"></i></li>
            <li (click)="getAllTempList(1, itemsPerPage, '发货提醒')">发货提醒 <i *ngIf="keyword === '发货提醒'" class="iconfont icon-left"></i></li>
            <li (click)="getAllTempList(1, itemsPerPage, '全部')">全部 <i *ngIf="keyword === '全部'" class="iconfont icon-left"></i></li>
          </ul>
        </div>
        <div class="table-style">
          <table class="table">
            <thead>
            <tr>
              <td>id</td>
              <td>微信模板ID</td>
              <td>微信标题</td>
              <td>关键词</td>
              <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of allTempList">
              <td>{{item.id}}</td>
              <td>{{item.wx_id}}</td>
              <td>{{item.title}}</td>
              <td class="omit"><span *ngFor="let ite of item.keyword_list">{{ite}} </span></td>
              <td>
                <a href="javascript:;" *ngIf="!item.selected" (click)="addMsgTemp(item)">添加</a>
                <a href="javascript:;" *ngIf="item.selected">已选择</a>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="text-center">
            <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage"
                        previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<!-- 确认删除弹窗 -->
<!--<div class="modal fade" bsModal #deleteModal="bs-modal" tabindex="-1">-->
<!--<div class="modal-dialog modal-md">-->
<!--<div class="modal-content">-->
<!--<div class="modal-header">-->
<!--<h4 class="modal-title pull-left">确认</h4>-->
<!--<button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">-->
<!--<span aria-hidden="true">&times;</span>-->
<!--</button>-->
<!--</div>-->
<!--<div class="modal-body text-center">-->
<!--<p>确定删除吗？</p>-->
<!--<div class="text-right mt20">-->
<!--<button class="btn btn-default btn-md-long" type="button" (click)="deleteModal.hide()">取消</button>-->
<!--<button class="btn btn-success btn-md-long" type="button" (click)="delTempSubmit()">确定</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<!-- 选择商品 -->
<div bsModal #addGoodsModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">选择商品</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addGoodsModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="search-line">
          <input type="text" class="form-control" placeholder="按商品名称搜索" name="keyWordDlg" [(ngModel)]="keyWordDlg">
          <select class="form-control" name="groupDlg" [(ngModel)]="groupIdDlg">
            <option value="0">全部商品</option>
            <option *ngFor="let item of groupList" value="{{item.id}}">{{item.name}}</option>
          </select>
          <select class="form-control"  name="statusDlg" [(ngModel)]="statusDlg">
            <option value="选择商品状态">选择商品状态</option>
            <option value="上架">上架</option>
            <option value="下架">下架</option>
          </select>
          <div class="pull-right">
            <button class="btn btn-default" (click)="searchDlg()">搜索</button>
            <button class="btn" (click)="resetDlg()">重置</button>
          </div>
        </div>
        <div class="table-title">
          <span class="col-md-2">商品分类</span>
          <span class="col-md-2">商品图片</span>
          <span class="col-md-2">商品名称</span>
          <span class="col-md-2">库存量</span>
          <span class="col-md-3">创建时间</span>
          <span class="col-md-1"></span>
        </div>
        <div class="table-items" *ngFor="let item of goodsListDlg">
          <span class="col-md-2 omit"><span class="mr-5" *ngFor="let item2 of item.goods_category">{{item2.name}}</span></span>
          <span class="col-md-2"><img src="{{item.first_picture?aliyunOssOutputUrl+'/'+item.first_picture:''}}" alt=""></span>
          <span class="col-md-2" title="{{item.name}}">{{item.name}}</span>
          <span class="col-md-2">{{item.in_stock}}</span>
          <span class="col-md-3">{{item.created_at}}</span>
          <span class="col-md-1"><a href="javascript:;" (click)="checkedGoods = item;addGoodsModal.hide();">选择</a></span>
        </div>
      </div>
      <div class="model-footer">
        <div class="text-center">
          <pagination (pageChanged)="dlgPageChanged($event)" [totalItems]="totalItemsDlg" [itemsPerPage]="itemsPerPageDlg" [(ngModel)]="currentPageDlg"  [maxSize]="5"
                      previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 选择拼团 -->
<div bsModal #addGroupModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">选择拼团</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addGroupModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="search-line text-center">
          <div class="ui-radio" [class.ui-radioed]="groupType == 1" (click)="changeGroupType(1)">
            <i class="iconfont icon-iconfontradiobox"></i>
            <span>普通拼团</span>
            <input type="radio" value="">
          </div>
          <div class="ui-radio" [class.ui-radioed]="groupType == 2" (click)="changeGroupType(2)">
            <i class="iconfont icon-iconfontradiobox"></i>
            <span>拉新拼团</span>
            <input type="radio" value="">
          </div>
          <div class="ui-radio" [class.ui-radioed]="groupType == 3" (click)="changeGroupType(3)">
            <i class="iconfont icon-iconfontradiobox"></i>
            <span>一分抽奖拼团</span>
            <input type="radio" value="">
          </div>
        </div>
        <table class="table">
          <thead>
          <tr>
            <th>活动名称</th>
            <th>商品</th>
            <th>成团人数</th>
            <th>价格</th>
            <th>时间段</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of activityList">
            <td>{{item.name}}</td>
            <td><img src="{{aliyunOssOutputUrl+'/'+item.activity_goods[0].goods.first_picture}}" alt="">{{item.activity_goods[0].goods_name}}</td>
            <td>{{item.activity_goods[0].number}}</td>
            <td>{{item.activity_goods[0].activity_goods_sku[0].price/1000}}</td>
            <td>{{item.start_date}}至<br>{{item.end_date}}</td>
            <td>
              <a href="javascript:;"(click)="checkedGroup = item;addGroupModal.hide();">选择</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="model-footer">
        <div class="text-center">
          <pagination (pageChanged)="dlgPageChanged($event)" [totalItems]="totalItemsDlg" [itemsPerPage]="itemsPerPageDlg" [(ngModel)]="currentPageDlg"  [maxSize]="5"
                      previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 选择卡券 -->
<div bsModal #addCouponModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">选择卡券</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addCouponModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="search-line">
          <input type="text" class="form-control" placeholder="请输入卡券名称" name="coupon_name" [(ngModel)]="coupon_name">
          <div class="pull-right">
            <button class="btn btn-default" (click)="searchDlg()">搜索</button>
          </div>
        </div>
        <table class="table">
          <thead>
          <tr>
            <th>ID</th>
            <th>卡券名称</th>
            <th>卡券有效期</th>
            <th>卡券原始库存</th>
            <th>卡券剩余库存</th>
            <th>卡券核销量</th>
            <th>备注信息</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of cardList">
            <td>{{item.id}}</td>
            <td>{{item.card_coupons_name}}</td>
            <td *ngIf="item.term_of_validity_type === 1">{{item.term_of_validity_time_start.substring(0,10)}}至{{item.term_of_validity_time_end.substring(0,10)}}</td>
            <td *ngIf="item.term_of_validity_type === 2">领取{{item.term_of_validity_start}}天后生效 有效期{{item.term_of_validity}}天</td>
            <td *ngIf="item.in_stock_type === 0">不限</td>
            <td *ngIf="item.in_stock_type === 1">{{item.in_stock}}</td>
            <td>{{item.remain}}</td>
            <td>{{item.card_coupons_used_report?.used_total}}</td>
            <td>{{item.remark}}</td>
            <td>
              <span>
                <a href="javascript:;" (click)="checkedCoupon = item;addCouponModal.hide();">确定选择</a>
              </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="model-footer">
        <div class="text-center">
          <pagination (pageChanged)="dlgPageChanged($event)" [totalItems]="totalItemsDlg" [itemsPerPage]="itemsPerPageDlg" [(ngModel)]="currentPageDlg"  [maxSize]="5"
                      previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
        </div>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event"></app-notification>
